var app = new Vue({
    el: "#app",
    data() {
        return {
            nodeList: [
            ],
            lineList: [],
            colors: ["#ff6b81", "#70a1ff", "#eccc68", "#7bed9f", "#5352ed"],
            group: [],
            step: 0,
            thisTurnStepNum: 1
        }
    },
    mounted: function () {
        this.initNodes()
    },
    methods: {
        initNodes() {
            this.step = 0
            this.group = []
            this.nodeList = [
                { id: "A", style: { left: "29vmin", top: "13vmin" } },
                { id: "B", style: { left: "58vmin", top: "13vmin" } },
                { id: "C", style: { left: "13vmin", top: "40vmin" } },
                { id: "D", style: { left: "45vmin", top: "40vmin" } },
                { id: "E", style: { left: "74vmin", top: "40vmin" } },
                { id: "F", style: { left: "29vmin", top: "67vmin" } },
                { id: "G", style: { left: "58vmin", top: "67vmin" } },]
            this.lineList = [{
                id: "AB", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd"
                    , opacity: "1"
                }, node1: "A", node2: "B"
            },
            {
                id: "CA", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "A", node2: "C"
            },
            {
                id: "AD", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "A", node2: "D"
            },
            {
                id: "DB", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "B", node2: "D"
            },
            {
                id: "BE", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "B", node2: "E"
            },
            {
                id: "CD", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "C", node2: "D"
            },
            {
                id: "DE", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "D", node2: "E"
            },
            {
                id: "CF", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "C", node2: "F"
            },
            {
                id: "GE", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "G", node2: "E"
            },
            {
                id: "FD", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "F", node2: "D"
            },
            {
                id: "FG", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "F", node2: "G"
            },
            {
                id: "DG", cost: 0, style: {
                    top: "45vmin",
                    left: "50vmin",
                    transform: 'rotate(0deg)',
                    "background-color": "#ddd", opacity: "1"
                }, node1: "D", node2: "G"
            },]
            setTimeout(() => {
                // 生成随机开销
                const arr100 = []
                while (arr100.length < 100) {
                    arr100.push(arr100.length + 1)
                }
                // 求角度
                function getTanDeg(tan) {
                    var result = Math.atan(tan) / (Math.PI / 180);
                    result = Math.round(result);
                    // console.log(tan, result)
                    return result;

                }
                // 初始化线位置
                this.lineList.map(line => {
                    let node1 = this.nodeList.find(item => {
                        return item.id === line.id[0]
                    })
                    let node2 = this.nodeList.find(item => {
                        return item.id === line.id[1]
                    })

                    line.style.left = Number(node1.style.left.match(/\d+/)) + 5 + "vmin"
                    line.style.top = Number(node1.style.top.match(/\d+/)) + 5 + "vmin"

                    line.style.width =
                        Math.sqrt(
                            (Number(node1.style.left.match(/\d+/)) - Number(node2.style.left.match(/\d+/))) ** 2
                            + (Number(node1.style.top.match(/\d+/)) - Number(node2.style.top.match(/\d+/))) ** 2
                        ) + "vmin"
                    // console.log(Number(node1.style.left.match(/\d+/)) - Number(node2.style.left.match(/\d+/))
                    //     , Number(node1.style.top.match(/\d+/)) - Number(node2.style.top.match(/\d+/))
                    //     ,
                    //     (Number(node1.style.top.match(/\d+/)) - Number(node2.style.top.match(/\d+/)))
                    //     /
                    //     (Number(node1.style.left.match(/\d+/)) - Number(node2.style.left.match(/\d+/)))
                    // )
                    line.style.transform =
                        `rotate(${getTanDeg(
                            (Number(node1.style.top.match(/\d+/)) - Number(node2.style.top.match(/\d+/)))
                            /
                            (Number(node1.style.left.match(/\d+/)) - Number(node2.style.left.match(/\d+/)))

                        )}deg)`

                    let tIndex = Math.floor(Math.random() * arr100.length)
                    line.cost = arr100.splice(tIndex, 1)[0]

                });
                this.lineList.sort((a, b) => {
                    return a.cost - b.cost
                })
                // console.log(this.lineList)
            }, 500)




        },
        autoNextStep: function () {
            if (document.getElementById("autoNextStep").innerText == "自动") {
                document.getElementById("autoNextStep").innerText = "暂停"
                timer = setInterval(() => {
                    this.nextStep()
                }, 1000)
            } else if (document.getElementById("autoNextStep").innerText == "暂停") {
                document.getElementById("autoNextStep").innerText = "自动"
                window.clearInterval(timer)

            }

        },
        /**
         * 重置
         */
        reset: function () {

            this.initNodes()
        },
        nextStep: function () {
            if (this.ifFinished()) return
            if (this.group.length == 0) {
                // 第一步开始
                this.$notify({
                    title: `第${this.step + 1}步`,
                    message: "随机选取顶点",
                });
                this.group.push(this.nodeList[Math.floor(Math.random() * 7)])
                console.log(`随机点${this.group[0].id}`)

            } else {
                let minLine = { cost: 101 }, minNode = {}
                this.group.map((nodeItem, nodeIndex) => {
                    this.lineList.map((lineItem, lineIndex) => {
                        if (
                            (
                                (
                                    lineItem.node1 == nodeItem.id
                                    // &&
                                    // this.group.map(nodeItem => {
                                    //     if (nodeItem.id == lineItem.node2) return true
                                    // }).indexOf(true) == -1

                                )
                                ||
                                (
                                    lineItem.node2 == nodeItem.id
                                    // &&
                                    // this.group.map(nodeItem => {
                                    //     if (nodeItem.id == lineItem.node1) return true
                                    // }).indexOf(true) == -1
                                )
                            )
                            &&
                            (
                                lineItem.flag != true
                            )
                        ) {





                            // 找相邻的剩下的线
                            if (lineItem.cost < minLine.cost) {
                                // 获取最短的线
                                minLine = lineItem

                            }

                        }


                    })


                })
                console.log(minLine)
                minLine.flag = true
                console.log(this.group, minLine.node1, this.group.indexOf(minLine.node1), this.group.indexOf(minLine.node1) != '-1', this.group.indexOf(minLine.node2) != '-1')
                // 先判断回路 
                let node1Exist = false, node2Exist = false
                console.log(node1Exist, node2Exist)
                this.group.map(nodeItem => {
                    if (nodeItem.id == minLine.node1) {

                        node1Exist = true
                    }
                    if (nodeItem.id == minLine.node2) {

                        node2Exist = true
                    }
                })
                if (node1Exist && node2Exist) {

                    // 存在回路 
                    console.log("回路", minLine)
                    this.$set(minLine.style, "opacity", "0.2")
                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "存在回路，跳过本步",
                        type: "warning"
                    });

                } else {
                    // 不存在回路
                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "从已标记节点的相邻路径中找到已标记路径之外的开销最小的路径",
                    });
                    this.$set(minLine.style, "background-color", "#eccc68")
                    this.nodeList.map(nodeItem => {
                        if (nodeItem.id == minLine.node1 || nodeItem.id == minLine.node2) {
                            this.group.push(nodeItem)
                        }
                    })
                    this.group = new Array(... new Set(this.group))
                    console.log(this.group)



                }

            }


            this.changeColor()
            this.step++

        },
        changeColor: function () {
            this.group.map(nodeItem => {
                this.$set(nodeItem.style, "background-color", this.colors[0])
            })
        },
        /**
         * 下一步
         */
        nextStepOld: function () {
            if (this.ifFinished()) return
            let minLine = null


            // this.lineList.forEach(line => {
            //     if (minLine.cost > line.cost && line.group === undefined) {
            //         console.log(line)
            //         minLine = line
            //     } else {
            //         console.log(minLine, line,)
            //     }

            // })

            // 判断是否为回路，若不为回路将节点入组
            const ifLoop = (node1, node2, lineList) => {
                console.log(node1)
                let loop = false
                let node1Exist = false
                let node2Exist = false
                this.group.forEach((groupItem, groupIndex) => {
                    if (groupItem.indexOf(node1.id) != -1 && groupItem.indexOf(node2.id) != -1) {
                        loop = true
                        console.log(groupItem.indexOf(node1.id), groupItem.indexOf(node2.id), node1.id, node2.id)
                    }
                    if (groupItem.indexOf(node1.id) != -1) {
                        node1Exist = groupIndex
                    }
                    if (groupItem.indexOf(node2.id) != -1) {
                        node2Exist = groupIndex
                    }
                })
                console.log(node1Exist, node2Exist)
                if (loop) {
                    console.log("存在回路")
                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "存在回路，跳过本步",
                        type: "warning"
                    });
                    this.lineList.map((lineItem, lineIndex) => {
                        if (lineItem.id.indexOf(node1.id) != -1 && lineItem.id.indexOf(node2.id) != -1) {

                            // 找到回路那条线，变透明
                            // let tObj = JSON.parse(JSON.stringify(lineItem))
                            // lineItem = tObj.style.opacity = "0.2"
                            // lineItem = tObj
                            // this.lineList[lineIndex].style.opacity = {}
                            this.$set(this.lineList[lineIndex].style, "opacity", "0.2")
                            // console.log("zhaodao ", lineItem, lineItem.style.opacity)
                        }
                    })
                    return loop
                }

                if (node1Exist !== false && node2Exist === false) {
                    this.group[node1Exist].push(node2.id)
                    console.log("点1存在，加入点2")
                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "加入已有标记组"
                    });


                } else if (node2Exist !== false && node1Exist === false) {
                    this.group[node2Exist].push(node1.id)
                    console.log("点2存在，加入点1")

                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "加入已有标记组"
                    });
                } else if (node1Exist === false && node2Exist === false) {
                    console.log("点1不存在，点2不存在")
                    this.group.push([node1.id, node2.id])

                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "新的标记组"
                    });
                } else if (node2Exist !== false && node1Exist !== false) {
                    console.log("点1存在，点2也存在")
                    let minIndex = node1Exist > node2Exist ? node2Exist : node1Exist
                    let maxIndex = node1Exist > node2Exist ? node1Exist : node2Exist
                    // this.group[minIndex].push(...this.group.splice(maxIndex, 1))
                    this.group[minIndex].push(...this.group[maxIndex])
                    this.group.splice(maxIndex, 1)

                    this.$notify({
                        title: `第${this.step + 1}步`,
                        message: "合并两个标记组"
                    });
                }

                return loop
            }

            const changeColor = () => {
                this.nodeList.forEach((nodeItem, nodeIndex) => {
                    this.group.forEach((groupItem, groupIndex) => {
                        if (groupItem.indexOf(nodeItem.id) != -1) {
                            nodeItem.style["background-color"] = this.colors[groupIndex]
                            nodeItem.style["color"] = "#fff"
                            console.log(nodeItem.style["background-color"])
                        }
                    })
                })


            }

            let node1
            this.nodeList.map(item => {
                if (item.id == this.lineList[this.step].node1) {
                    node1 = item
                }
            })

            let node2
            this.nodeList.map(item => {
                if (item.id == this.lineList[this.step].node2) {
                    node2 = item
                }
            })
            // this.lineList[this.step].node2
            console.log(node1, node2)


            if (!ifLoop(node1, node2, this.lineList)) {
                // 如果没有回路
                minLine = this.lineList[this.step]
                minLine.group = 2
                minLine.style["background-color"] = this.colors[minLine.group]
                changeColor()
            }
            console.log(this.lineList[this.step].id[0], this.lineList[this.step].id[1])
            this.step++




            // }

        },
        /**
         * 判断是否完成
         */
        ifFinished() {
            let finished = true

            this.nodeList.map(nodeItem => {
                if (nodeItem.style["background-color"] != this.colors[0]) {
                    finished = false
                }
            })
            if (finished) {
                this.step--
                this.$notify({
                    title: `普里姆算法演示结束`,
                    message: "最小生成树求取完成",
                    type: 'success'
                });
                document.getElementById("autoNextStep").innerText = "自动"
                try {
                    window.clearInterval(timer)
                } catch (e) { }

            }
            return finished
        }

    }
})